<template>
  <view class="indexBig">
    <view class="top">
      <u-icon name="arrow-left" size="36" @click="goToBack"></u-icon>
      <text>确认订单</text>
    </view>
    <view class="checkAddress" @click="goToPage('newAddress')" v-if="!address">
      <view class="">
        <view class="">请选择地址</view>
        <view class="">填写正确的地址</view>
      </view>
      <u-icon name="arrow-right" size="36" color="#999"></u-icon>
    </view>
    <!-- @click="showAddressList" -->
    <view class="checkAddress" v-if="address" @click="goToPage('newAddress')">
      <view class="">
        <view class="">{{ address.addressName }}</view>
        <view class="">{{ address.nameTakingMeal }} {{ address.phoneTakingMeals }}</view>
      </view>
      <u-icon name="arrow-right" size="36" color="#999"></u-icon>
    </view>
    <view class="payWay" @click="showPayWay">
      <view class="">支付方式</view>
      <view class="">
        <text>{{ payInfo.payWayText }}</text>
        <u-icon name="arrow-right" size="36" color="#999"></u-icon>
      </view>
    </view>
    <view class="shopCarContent">
      <view class="warn"> 温馨提示：不同店铺会分开包装，但是会一起送到 </view>
      <view class="shopTop">
        <view class="">
          <label> <checkbox value="all" :checked="hasAllCheck" @click="changeAllCheck" /><text>全选</text> </label>
        </view>
      </view>
      <view class="listContent">
        <view class="shopList" v-for="(item, index) in shopCarInfo.shopCarList" :key="index">
          <view class="">
            <image :src="item.logo | getImg" mode=""> </image>
            <view class="">
              <view class="">{{ item.storeName }}</view>
              <view class="">{{ item.storeDescription }}</view>
            </view>
          </view>
          <view class="foodList" v-for="(foodItem, foodIndex) in item.hcShoppingCartList" :key="foodIndex">
            <checkbox value="index" :checked="foodItem.checked" ref="childCheckBox" @click="shopCarChangeRadio(index, foodIndex)" />
            <view class="">
              <image :src="foodItem.hcCommodity.productPicture | getImg" mode=""></image>
              <view class="">
                <view class="">{{ foodItem.hcCommodity.tradeName }}</view>
                <view class="" v-if="foodItem.commoditySpecifications"> 规格：{{ foodItem.commoditySpecifications }}</view>
                <view class="">
                  <view class="">￥{{ foodItem.commodityPrice }}</view>
                  <view class="">
                    <svg @click="shopCarWithChangeNum('down', foodItem, item)" t="1672841614542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5146" width="18" height="18">
                      <path d="M170.666667 469.333333h682.666666v85.333334H170.666667z" fill="#444444" p-id="5147"></path>
                    </svg>
                    <u-input type="text" v-model="foodItem.commodityQuantity" placeholder="1" :clearable="false" :disabled="true" />
                    <svg @click="shopCarWithChangeNum('add', foodItem, item)" t="1672841289544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3814" width="15" height="15">
                      <path d="M939.939489 459.072557 562.339502 459.072557 562.339502 83.519182 462.055494 83.519182 462.055494 459.072557 84.455507 459.072557 84.455507 559.356564 462.055494 559.356564 462.055494 939.003164 562.339502 939.003164 562.339502 559.356564 939.939489 559.356564Z" fill="#272636" p-id="3815"></path>
                    </svg>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="note">
            <view class="" @click="showNote(index)">备注</view>
          </view>
          <view class="noteInput" :class="{ show: noteCheckIndex == index }">
            <u-input type="text" v-model="noteContentArr[index]" placeholder="请输入您的商品备注"></u-input>
          </view>
        </view>

        <view class="total">
          <view class="">共计</view>
          <view class="">￥{{ shopCarInfo.totalPrice }}</view>
        </view>
      </view>
    </view>
    <view class="shopCarBottom">
      <view class="">
        <view class="">
          <u-icon name="shopping-cart" size="60"></u-icon>
          <div class="num">{{ shopCarInfo.total }}</div>
        </view>
        <view class="">￥{{ shopCarInfo.totalPrice }}</view>
      </view>
      <view class="" @click="submitOrder"> 提交订单 </view>
    </view>
    <u-toast ref="uToast"></u-toast>
    <!-- 支付方式选择 -->
    <view class="payWayBox">
      <u-popup v-model="payWayVisiable" mode="bottom" :closeable="true">
        <view class="payWayContent">
          <view class="tit">请选择支付方式</view>
          <view class="listContent">
            <view class="list" @click="selectThisPayWay(0)" v-if="myInfo.walletBalance && myInfo.walletBalance > 0 && myInfo.walletBalance >= shopCarInfo.totalPrice">
              <u-icon name="rmb-circle-fill" size="56" color="#EA7130" style="margin-right: 16rpx"></u-icon>
              <view class="">余额（{{ myInfo.walletBalance ? myInfo.walletBalance.toFixed(2) : '0.00' }}）</view>
            </view>
            <view class="list" @click="selectThisPayWay(1)" v-if="myInfo.walletBalance && myInfo.walletBalance > 0 && myInfo.walletBalance < shopCarInfo.totalPrice">
              <u-icon name="rmb-circle-fill" size="56" color="#EA7130" style="margin-right: 16rpx"></u-icon>
              <view class="">余额（{{ myInfo.walletBalance ? myInfo.walletBalance.toFixed(2) : '0.00' }}） + 微信 </view>
            </view>
            <view class="list" @click="selectThisPayWay(2)" v-if="myInfo.walletBalance && myInfo.walletBalance > 0 && myInfo.walletBalance < shopCarInfo.totalPrice && !isWechat">
              <u-icon name="rmb-circle-fill" size="56" color="#EA7130" style="margin-right: 16rpx"></u-icon>
              <view class="">余额（{{ myInfo.walletBalance ? myInfo.walletBalance.toFixed(2) : '0.00' }}） + 支付宝 </view>
            </view>
            <view class="list" @click="selectThisPayWay(3)">
              <u-icon name="weixin-fill" size="56" color="#377D22" style="margin-right: 16rpx"></u-icon>
              <view class="">微信</view>
            </view>
            <view class="list" @click="selectThisPayWay(4)" v-if="!isWechat">
              <u-icon name="zhifubao-circle-fill" size="56" color="#4EB3F7" style="margin-right: 16rpx"></u-icon>
              <view class="">支付宝</view>
            </view>
          </view>
        </view>
      </u-popup>
    </view>
    <MyLoading :showLoading="showLoading" :text="'正在查询您的支付结果,请稍等'"></MyLoading>
    <view id="content"></view>
    <u-modal v-model="show" content="您是否已经支付成功？" confirmText="是" cancelText="否" :showConfirmButton="true" :showCancelButton="true" @confirm="modalConfirm" @cancel="modalCancel"></u-modal>
  </view>
</template>

<script>
import { getShopCarList, addShopCar, createOrder, getDetailAddressList, checkAddress, getPayResult } from '@/utils/req/api.js'
import MyMinix from '@/utils/minix/minix.js'
import { isWechat } from '@/utils/commen'
import CommenHeader from '@/components/header/header.vue'
import MyLoading from '@/components/loading/loading.vue'
export default {
  mixins: [MyMinix],
  components: {
    CommenHeader,
    MyLoading,
  },
  data() {
    return {
      isWechat,

      myInfo: {
        walletBalance: 0,
      },
      backupsAddressId: '',

      shopCarInfo: '',

      address: {},
      hasAllCheck: false,
      addressList: [],
      posiShow: false,
      checkIndex: 0,
      addressCheckIndex: 0,

      payWay: '钱包余额',
      canChoose: false,
      payInfo: {
        payWayText: '余额',
        payWayType: '钱包',
      },
      payWayList: [
        {
          icon: 'rmb-circle-fill',
          color: '#EA7130',
          text: '余额',
          type: 'wallet',
          paymentMethod: '钱包',
        },
        {
          icon: 'rmb-circle-fill',
          color: '#EA7130',
          text: '余额 + 微信',
          type: 'walletWithWeCaht',
          paymentMethod: '钱包+微信',
        },
        {
          icon: 'rmb-circle-fill',
          color: '#EA7130',
          text: '余额 + 支付宝',
          type: 'walletWithAlipay',
          paymentMethod: '钱包+支付宝',
        },
        {
          icon: 'weixin-fill',
          color: '#377D22',
          text: '微信',
          type: 'weCaht',
          paymentMethod: '微信',
        },
        {
          icon: 'zhifubao-circle-fill',
          color: '#4EB3F7',
          text: '支付宝',
          type: 'Alipay',
          paymentMethod: '支付宝',
        },
      ],
      payWayVisiable: false,

      noteCheckIndex: 999,
      noteContentArr: [],

      showLoading: false,
      timer: '',
      num: 0,

      show: false,

      searchOrderFlag: false,
      tempTimeStr: '',

      isShow: false,
    }
  },
  mounted() {},
  onShow() {
    this.checkAddress()
    if (uni.getStorageSync('orderCreateResult')) {
      this.showLoading = true
      this.tempTimeStr = new Date().getTime()
      this.timer = setInterval(() => {
        if (!this.searchOrderFlag) {
          this.getPayResut()
        }
        if (new Date().getTime() - this.tempTimeStr > 1000 * 5) {
          this.show = true
          this.showLoading = false
          clearInterval(this.timer)
          this.searchOrderFlag = false
          this.tempTimeStr = ''
          uni.removeStorageSync('orderCreateResult')
        }
      }, 1000)
    }
  },
  onLoad(options) {
    console.log('options', options.addressId)

    if (options.addressId) {
      this.backupsAddressId = options.addressId
    }
  },
  methods: {
    goToBack() {
      uni.redirectTo({
        url: '/pages/index/index',
      })
    },
    async checkAddress() {
      let res = await checkAddress({
        addressId: this.backupsAddressId,
      })
      console.log('res', res)
      if (res.data.success) {
        let { addressId, nameTakingMeal, phoneTakingMeals, addressDetails, walletBalance, supplyAddressName, supplyAddressCode } = res.data.result

        this.myInfo = res.data.result

        this.payWayList[0].text = `余额(￥${this.myInfo.walletBalance ? this.myInfo.walletBalance.toFixed(2) : '0.00'})`
        this.payWayList[1].text = `余额(￥${this.myInfo.walletBalance ? this.myInfo.walletBalance.toFixed(2) : '0.00'}) + 微信`
        this.payWayList[2].text = `余额(￥${this.myInfo.walletBalance ? this.myInfo.walletBalance.toFixed(2) : '0.00'}) + 支付宝`

        if (!addressId || !phoneTakingMeals || !nameTakingMeal) {
          this.address = ''
        } else {
          this.address = {
            addressId,
            nameTakingMeal,
            phoneTakingMeals,
            litterAddress: supplyAddressName + '(' + supplyAddressCode + ')',
            addressName: addressDetails.addressName + supplyAddressName + '(' + supplyAddressCode + ')',
          }
        }
      } else {
        this.address = ''
      }

      this.getShopCarList()
    },
    //获取购物车列表
    async getShopCarList() {
      let res = await getShopCarList({
        addressId: this.backupsAddressId,
      })
      let total = 0,
        totalPrice = 0
      let newArr = []
      res.data.result.forEach(item => {
        newArr.push('')
        item.hcShoppingCartList.forEach((foodItem, foodIndex) => {
          total = total + foodItem.commodityQuantity
          foodItem.checked = true
          totalPrice = this.accAdd(totalPrice, foodItem.commodityPrice)
        })
      })
      this.shopCarInfo = {
        total,
        shopCarList: res.data.result,
        totalPrice,
      }
      this.noteContentArr = newArr
      this.hasAllCheck = true

      this.checkPayWay()
    },
    // 全选状态更改
    changeAllCheck() {
      this.hasAllCheck = !this.hasAllCheck
    },
    //购物车单选切换
    shopCarChangeRadio(listIndex, childIndex) {
      let total = 0,
        totalPrice = 0
      this.shopCarInfo.shopCarList[listIndex].hcShoppingCartList[childIndex].checked = !this.shopCarInfo.shopCarList[listIndex].hcShoppingCartList[childIndex].checked
      this.shopCarInfo.shopCarList.forEach((item, index) => {
        item.hcShoppingCartList.forEach((childItem, childIndex) => {
          if (childItem.checked) {
            total = total + childItem.commodityQuantity
            totalPrice = this.accAdd(totalPrice, childItem.commodityPrice)
          }
        })
      })
      this.shopCarInfo.total = total
      this.shopCarInfo.totalPrice = totalPrice.toFixed(2)

      this.checkPayWay()
    },
    // showAddressList() {
    // 	this.posiShow = true;
    // },
    //单选赋值--同步存储永久缓存
    changeRadio(checkIndex) {
      this.addressList.forEach((item, index) => {
        if (checkIndex == index) {
          item.checked = true
          this.addressCheckIndex = checkIndex
        } else {
          item.checked = false
        }
      })
    },
    goToPage(type) {
      let url
      switch (type) {
        case 'newAddress':
          url = './addAddress?addressId=' + this.backupsAddressId
          break
      }
      uni.navigateTo({
        url,
      })
    },
    showNote(index) {
      this.noteCheckIndex = index
    },
    selectThis() {
      uni.setStorageSync('address', JSON.stringify(this.addressList[this.addressCheckIndex]))
      this.address = this.addressList[this.addressCheckIndex]
      this.posiShow = false
    },
    async submitOrder() {
      if (!this.address) {
        this.$showToast.call(this, '请填写您的地址', 'default')
        return
      }
      if (!this.address.addressName || !this.address.nameTakingMeal || !this.address.phoneTakingMeals) {
        this.$showToast.call(this, '请填写您的地址', 'default')
        return
      }
      let shoppingCartIds = []
      this.shopCarInfo.shopCarList.forEach(item => {
        item.hcShoppingCartList.forEach(foodItem => {
          if (foodItem.checked) {
            shoppingCartIds.push(foodItem.id)
          }
        })
      })
      if (shoppingCartIds.length == 0) {
        this.$showToast.call(this, '请至少选择一个商品', 'default')
        return
      }

      let remarksObj = {}
      this.noteContentArr.forEach((item, index) => {
        if (item) {
          remarksObj[this.shopCarInfo.shopCarList[index].id] = item
        }
      })
      console.log(this.noteContentArr, remarksObj)
      let obj = {
        shoppingCartIds,
        paymentMethod: this.payInfo.payWayType,
        remarksObj,
      }
      if (uni.getStorageSync('uid')) {
        obj.shareUserId = uni.getStorageSync('uid')
      }
      if (this.payInfo.payWayType == '微信' || this.payInfo.payWayType == '钱包+微信') {
        if (isWechat()) {
          obj.wxPayType = 'jsapi'
        } else {
          obj.wxPayType = 'h5'
        }
      }
      // if (res.data.success) {
      if (this.payInfo.payWayType == '钱包') {
        let res = await createOrder(obj)
        console.log('res', res)
        this.getPayResut(res.data.result)
      } else {
        if (this.payInfo.payWayType == '微信' || this.payInfo.payWayType == '钱包+微信') {
          let res = await createOrder(obj)
          console.log('res', res)
          let obj = JSON.parse(JSON.stringify(res.data.result))
          obj.litterAddress = this.address.litterAddress
          uni.setStorageSync('orderCreateResult', JSON.stringify(obj))
          if (isWechat()) {
            let { appid, timeStamp, nonceStr, packageValue, signType, paySign } = res.data.result.hcWxPay
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest',
              {
                appId: appid, //公众号ID，由商户传入
                timeStamp: timeStamp, //时间戳，自1970年以来的秒数
                nonceStr: nonceStr, //随机串
                package: packageValue,
                signType: signType, //微信签名方式：
                paySign: paySign, //微信签名
              },
              res => {
                console.log('payresultssss', res)
                if (res.err_msg == 'get_brand_wcpay_request:ok') {
                  if (res.data) {
                    this.getPayResut(res.data.result)
                  }
                } else {
                  this.$showToast.call(this, '您已取消支付', '666')
                  uni.removeStorageSync('orderCreateResult')
                }
              }
            )
          } else {
            window.location.href = res.data.result.hcWxPay.h5Url
          }
        }

        if (this.payInfo.payWayType == '支付宝' || this.payInfo.payWayType == '钱包+支付宝') {
          console.log('remarksObj', remarksObj)
          uni.navigateTo({
            url: '/pages/my/order/pay?shoppingCartIds=' + shoppingCartIds + '&paymentMethod=' + this.payInfo.payWayType + '&remarksObj=' + JSON.stringify(remarksObj) + '&token=' + uni.getStorageSync('token'),
          })
        }
      }
      // } else {
      // 	this.$showToast.call(this, res.data.message, '666')
      // }
      if (uni.getStorageSync('uid')) {
        uni.removeStorageSync('uid')
      }
    },

    //获取支付结果
    async getPayResut(value) {
      this.searchOrderFlag = true

      value = value ? value : JSON.parse(uni.getStorageSync('orderCreateResult'))
      let payResult = await getPayResult(value)
      console.log('payResult', payResult)
      if (payResult.data.success) {
        if (payResult.data.result) {
          if (payResult.data.result.state == '已付款') {
            this.showLoading = false

            let obj = JSON.parse(JSON.stringify(payResult.data.result))
            obj.litterAddress = this.address.litterAddress
            uni.setStorageSync('successOrderInfo', JSON.stringify(obj))
            this.$showToast.call(this, '下单成功')

            clearInterval(this.timer)
            uni.removeStorageSync('orderCreateResult')

            uni.redirectTo({
              url: './share',
            })
          } else {
            this.searchOrderFlag = false
          }
        } else {
        }
      } else {
        clearInterval(this.timer)
        this.$showToast.call(this, payResult.data.message, 'default', 5000)
        uni.removeStorageSync('orderCreateResult')
        this.searchOrderFlag = false
        this.showLoading = false
        uni.navigateTo({
          url: '../../pages/index/index',
        })
      }
    },
    //购物车列表的数量加减
    async shopCarWithChangeNum(type, value, listValue) {
      if (type == 'add' && listValue.businessState == '打烊') {
        this.$showToast.call(this, '商家已经打烊', 'default')
        return
      }
      if (type == 'add' && value.hcCommodity.limitBuy >= -1 && value.commodityQuantity >= value.remainingQuantity) {
        this.$showToast.call(this, '已超出库存，无法继续添加', 'default')
        return
      }
      let commodityQuantity = 0
      if (type == 'add') {
        commodityQuantity = 1
      } else {
        if (value.commodityQuantity == 0) {
          return
        }
      }
      let obj = {
        addressId: this.address.addressId ? this.address.addressId : this.backupsAddressId,
        commodityId: value.hcCommodity.id,
        commodityQuantity: type == 'add' ? 1 : -1,
        commoditySpecifications: value.commoditySpecifications,
      }
      let res = await addShopCar(obj)
      console.log('res', res)
      if (res.data.success) {
        this.getShopCarList()
      } else {
        this.$showToast.call(this, res.data.success, 'default')
      }
    },
    showPayWay() {
      this.payWayVisiable = true
    },
    selectThisPayWay(index) {
      this.payInfo = {
        payWayText: this.payWayList[index].text,
        payWayType: this.payWayList[index].paymentMethod,
      }
      console.log('this.payInfo', this.payInfo)
      this.payWayVisiable = false
    },
    //判断当前最优的支付方式
    checkPayWay() {
      //如果钱包没钱，就默认微信支付
      if (!this.myInfo.walletBalance || this.myInfo.walletBalance == 0) {
        console.log('111')
        this.payInfo = {
          payWayText: '微信',
          payWayType: '微信',
        }
      }
      //如果钱包有钱，判断用户的钱包余额是否多于商品总价
      if (this.myInfo.walletBalance) {
        //多余总价默认余额
        if (this.myInfo.walletBalance >= this.shopCarInfo.totalPrice) {
          console.log('222')
          this.payInfo = {
            payWayText: `余额(￥${this.myInfo.walletBalance.toFixed(2)})`,
            payWayType: '钱包',
          }
        } else {
          console.log('333')
          //少余总价默认余额+微信
          this.payInfo = {
            payWayText: `余额(￥${this.myInfo.walletBalance.toFixed(2)}) + 微信`,
            payWayType: '钱包+微信',
          }
        }
      }
    },
    //
    modalConfirm() {
      this.show = false
      this.showLoading = true

      this.tempTimeStr = new Date().getTime()
      this.timer = setInterval(() => {
        if (!this.searchOrderFlag) {
          this.getPayResut()
        }
        if (new Date().getTime() - this.tempTimeStr > 1000 * 5) {
          this.show = true
          this.showLoading = false
          clearInterval(this.timer)
          this.searchOrderFlag = false
          this.tempTimeStr = ''
          uni.removeStorageSync('orderCreateResult')
        }
      }, 1000)
    },
    modalCancel() {
      uni.removeStorageSync('orderCreateResult')
      uni.navigateTo({
        url: '../../index/index',
      })
    },
  },
  onHide() {
    clearInterval(this.timer)
  },
  watch: {
    hasAllCheck(newVal) {
      let totalPrice = 0,
        total = 0
      this.shopCarInfo.shopCarList.forEach((item, index) => {
        item.hcShoppingCartList.forEach(foodItem => {
          total = foodItem.commodityQuantity + total
          totalPrice = this.accAdd(totalPrice, foodItem.commodityPrice)
          foodItem.checked = newVal
        })
      })
      this.shopCarInfo.total = total
      this.shopCarInfo.totalPrice = newVal ? totalPrice : 0
    },
  },
}
</script>

<style lang="scss" scoped>
.indexBig {
  min-height: 100vh;
  background: linear-gradient(0.45deg, #f5f5f5 6.52%, #ff8739 58.65%, #fb690f 98.93%);
  background-size: 100vw 466rpx;
  background-repeat: no-repeat;
  background-color: #f5f5f5;
  padding: 40rpx 20rpx;
  padding-bottom: 150rpx;

  .top {
    position: relative;
    height: 40rpx;
    text-align: center;
    .u-icon {
      position: absolute;
      left: 0;
    }
  }

  .checkAddress {
    background-color: #fff;
    border-radius: 20rpx;
    margin: 40rpx 0;
    padding: 36rpx 32rpx;
    @include flexs(space-between, center);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);

    image {
      width: 30rpx;
      height: 30rpx;
    }

    > view {
      > view {
        font-size: 32rpx;
        line-height: 1.5;

        &:nth-child(1) {
          font-size: 32rpx;
          margin-bottom: 12rpx;
        }

        &:nth-child(2) {
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.35);
        }
      }
    }
  }

  .payWay {
    background-color: #fff;
    border-radius: 20rpx;
    margin: 40rpx 0;
    padding: 40rpx 40rpx;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    @include flexs(space-between, center);

    image {
      width: 30rpx;
      height: 30rpx;
      margin-left: 10rpx;
    }

    > view {
      font-size: 32rpx;
      line-height: 2;
      @include flexs();

      &:nth-child(2) {
        color: #fa690a;
      }
    }
  }

  .shopCarContent {
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    border-radius: 20rpx;
    padding: 20rpx;

    .warn {
      font-size: 28rpx;
      line-height: 2;
      border-radius: 50rpx;
      background-color: #ffedd7;
      color: #ec2f2f;
      text-align: center;
      margin: 20rpx 0;
    }

    > .shopTop {
      @include flexs(space-between, center);
      font-size: 28rpx;
      line-height: 2;

      label,
      view {
        @include flexs(flex-end, center);
      }

      image {
        width: 30rpx;
        height: 30rpx;
      }
    }

    .shopList {
      > view:nth-child(1) {
        margin: 20rpx 0;
        @include flexs();
        border-bottom: 1px solid #eee;
        padding: 32rpx 0;

        image {
          width: 100rpx;
          height: 100rpx;
          margin-right: 24rpx;
          border-radius: 16rpx;
        }

        > view {
          height: 100rpx;
          @include flexs(space-between, flex-start);
          flex-direction: column;
          padding: 10rpx 0;

          > view {
            &:nth-child(1) {
              font-size: 28rpx;
              font-weight: bold;
            }

            &:nth-child(2) {
              font-size: 24rpx;
              color: rgba(0, 0, 0, 0.55);
            }
          }
        }
      }

      .foodList {
        @include flexs();
        margin: 40rpx 0;

        > view {
          width: calc(100% - 60rpx);
          @include flexs();

          image {
            width: 100rpx;
            height: 100rpx;
            margin-right: 24rpx;
            margin-left: 24rpx;
            flex-shrink: 0;
            border-radius: 5rpx;
            border-radius: 16rpx;
          }

          > view {
            width: calc(100% - 140rpx);
            height: 120rpx;
            @include flexs(space-between, flex-start);
            flex-direction: column;

            > view {
              @include flexs(space-between, center);
              width: 100%;

              &:nth-child(1) {
                font-size: 28rpx;
                font-weight: bold;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              &:nth-child(2) {
                font-size: 24rpx;
                color: #000;
              }

              > view {
                @include flexs();

                &:nth-child(2) {
                  border-radius: 50rpx;
                  border: 1px solid #eee;
                }

                &:nth-child(1) {
                  font-size: 28rpx;
                  font-weight: bold;
                }

                > view {
                  width: 50rpx;
                  height: 50rpx;
                  font-size: 36rpx;
                  text-align: center;
                  line-height: 50rpx;
                }

                svg {
                  margin: 0 10rpx;
                }

                /deep/.u-input__input {
                  flex: 1;
                  line-height: 50rpx;
                  height: 50rpx;
                  font-size: 28rpx;
                  min-height: 50rpx !important;
                  text-align: center;
                }
              }
            }
          }
        }
      }

      .note {
        font-size: 22rpx;
        @include flexs(center, flex-end);
        flex-direction: column;
        line-height: 2;
        color: rgba(0, 0, 0, 0.55);
      }

      .noteInput {
        display: none;

        /deep/.u-input__input {
          margin-top: 20rpx;
          flex: 1;
          line-height: 70rpx;
          height: 70rpx;
          font-size: 28rpx;
          min-height: 70rpx !important;
          text-align: left;
          background-color: #f5f5f5;
          border-radius: 10rpx;
          margin-bottom: 20rpx;
          padding: 0 20rpx;
        }
      }

      .show {
        display: block;
      }
    }

    .total {
      padding: 40rpx 0;
      @include flexs(space-between, center);
      border-top: 1px solid #eee;

      > view {
        &:nth-child(2) {
          color: #fa690a;
          font-weight: bold;
        }
      }
    }
  }

  /deep/.uni-checkbox-input {
    border-radius: 50%;
    width: 36rpx;
    height: 36rpx;
    border-color: #fa690a !important;
  }

  /deep/.uni-checkbox-input-checked {
    border-color: #fa690a !important;

    &:before {
      content: '';
      width: 30rpx;
      height: 30rpx;
      background-color: #fa690a;
      border-radius: 50%;
      display: block;
    }
  }

  .posiBottom {
    /deep/.u-drawer-bottom {
      width: 100% !important;
      padding: 30rpx 20rpx 40rpx 20rpx;
      border-top-left-radius: 40rpx;
      border-top-right-radius: 40rpx;
    }

    .posiContent {
      > view {
        &:nth-child(1) {
          font-size: 30rpx;
          text-align: center;
          font-weight: bold;
        }
      }

      > .listContent {
        margin-top: 10rpx;

        .list {
          border-bottom: 1px solid #eee;
          font-size: 30rpx;
          line-height: 2;
          padding: 10rpx 0;
          @include flexs();

          &:last-child {
            border-bottom: 0;
          }

          > view {
            margin-left: 10rpx;
            @include flexs(flex-start, flex-start);
            flex-direction: column;

            > view {
              &:nth-child(1) {
                font-size: 28rpx;
                line-height: 1.5;
              }

              @include flexs();

              > view {
                font-size: 24rpx;
                color: #666;
              }

              > view:nth-child(1) {
                margin-right: 20rpx;
              }
            }
          }

          /deep/.uni-radio-input {
            border-color: #f1b825;
            width: 40rpx;
            height: 40rpx;
          }

          /deep/.uni-radio-input-checked {
            background-color: #fff !important;
            border-color: #f1b825 !important;

            &:before {
              content: '';
              width: 35rpx;
              height: 35rpx;
              background-color: #f1b825;
              border-radius: 50%;
              display: block;
            }
          }
        }
      }

      .button {
        background-color: #f1b825;
        color: #fff;
        font-size: 32rpx;
        line-height: 2;
        border-radius: 50rpx;
        text-align: center;
        width: 100%;
        margin: 20rpx auto;
        padding: 5rpx 0;
      }
    }
  }
}

.shopCarBottom {
  z-index: 2;
  position: fixed;
  // left: 0;
  bottom: 0;
  width: 100%;
  height: 116rpx;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.05);
  @include flexs(space-between, center);
  padding: 18rpx 32rpx;

  image {
    width: 60rpx;
    height: 60rpx;
  }

  > view {
    &:nth-child(1) {
      > view {
        position: relative;

        > .num {
          position: absolute;
          right: -5px;
          top: -5px;
          font-size: 20rpx;
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
          text-align: center;
          line-height: 30rpx;
          color: #fff;
          background-color: red;
        }
      }

      > view:nth-child(2) {
        margin-left: 20rpx;
        font-weight: bold;
        font-size: 32rpx;
      }
    }

    @include flexs();

    &:nth-child(2) {
      background-color: #fa690a;
      color: #fff;
      border-radius: 30rpx;
      font-size: 28rpx;
      width: 206rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 60rpx;
      text-align: center;
      display: block;
    }
  }

  > .dis {
    background-color: #bababa !important;
    color: #fff !important;
  }
}

.payWayContent {
  .tit {
    margin-bottom: 20rpx;
    text-align: center;
    line-height: 2;
    font-weight: bold;
  }

  .list {
    @include flexs();
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 28rpx;
    line-height: 40rpx;
    padding: 24rpx 0;

    image {
      width: 50rpx;
      height: 50rpx;
      // border-radius: 50%;
      margin-right: 20rpx;
    }

    &:last-child {
      border: 0;
    }
  }
}

.box {
  background-color: rgba(0, 0, 0, 0.55);
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;

  image {
    width: 35%;
    margin-left: 60%;
    margin-top: 20rpx;
  }

  view {
    margin-top: 20rpx;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    font-size: 32rpx;
  }
}
</style>
<style lang="scss">
.payWayBox {
  /deep/.u-drawer-bottom {
    width: 100% !important;
    padding: 36rpx 20rpx 40rpx 20rpx;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
  }
}
</style>
